<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ehcarts</title>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/asset/theme/dark.js"></script>
    <style>
        .container {
            width: 600px;
            height: 400px;

        }
    </style>
</head>
<body>
<div class="container"></div>
<div id="timeline" class="container"></div>
<div id="filter" class="container"></div>
<div id="series" class="container"></div>
<div id="line" class="container"></div>
<div id="funnel" class="container"></div>
<div id="gauge" class="container"></div>
<script>
    /**
     * 基本组件
     */
    let init = echarts.init(document.querySelector('.container'), 'dark');
    let option = {
        title: {
            text: '我的第一幅ECharts',
            subtext: '副标题',
            left: 'center'
        },
        //可以控制位置当grid不存在的时候
        left: 'center',
        // 可以控制位置大小
        grid: {x: 'center', y: 'center',width: '50%', height: '50%'},
        tooltip: {
            //item axis none
            trigger: 'item',
            formatter: '{a}:{b}',

            axisPointer: {
                //line shadow cross none
                type: 'line'
            }
        },
        legend: {
            data: ['销量', '进货量'],
            left: 'left'
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true},
                dataZoom: {show: true}
            }
        },
        yAxis: {name: '产品销量', nameLocation: 'center', nameGap: 40},
        xAxis: [{
            data: ['产品A', '产品B', '产品C', '产品D', '产品E'],
            name: '产品名称',
            nameGap: 35,
            nameLocation: 'center'
        }],
        series: [
            {name: '销量', type: 'bar', data: [400, 400, 100, 500, 200]},
            {name: '进货量', type: 'bar', data: [400, 400, 100, 500, 200]}
        ]
    }
    init.setOption(option);
    /**
     * 时间轴
     */
    let chartsWithTimeline = echarts.init(document.querySelector('#timeline'));
    let optionForTimelineChart = {
        baseOption: {
            timeline: {data: ['2017', '2018', '2019']},
            title: {
                subtext: '带时间轴的图'
            },
            xAxis: [
                {'type': 'category', 'data': ['A公司', 'B公司', 'C公司']}
            ],
            yAxis: [
                {type: 'value'}
            ],
            series: [{type: 'bar'}]
        },
        options: [{
            title: {
                text: '2017销售情况',
            },
            series: [{data: [300, 123, 450]}]
        }, {
            title: {
                text: '2018销售情况',
            },
            series: [{data: [300, 5200, 450]}]
        }, {
            title: {
                text: '2019销售情况',
            },
            series: [{data: [300, 5400, 450]}]
        }]
    }

    chartsWithTimeline.setOption(optionForTimelineChart);
    init = echarts.init(document.querySelector('#filter'));
    option = {
        title: {
            text: '我的第一幅ECharts',
            subtext: '副标题',
            left: 'center'
        },
        left: 'center',
        tooltip: {
            //item axis none
            trigger: 'item',
            formatter: '{a}:{b}',

            axisPointer: {
                //line shadow cross none
                type: 'line'
            }
        },
        legend: {
            data: ['销量', '进货量'],
            left: 'left'
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        // dataZoom: [{id: 'dataZoomX', type: 'inside', xAxisIndex: [0], filterMode: 'empty'},{id: 'dataZoomY', type:'slider',yAxisIndex: [0], filterMode: 'empty'}],
        dataZoom: [{id: 'dataZoomX', type: 'inside', xAxisIndex: [0], filterMode: 'inside'},{id: 'dataZoomY', type:'slider',yAxisIndex: [0], filterMode: 'empty'}],
        yAxis: {type: 'value'},
        xAxis: {type: 'value'},
        series: {
            type: 'bar',
            data: [
                [10, 30],
                [20, 50],
                [5, 20],
                [2, 10],
            ]
        }
    }
    init.setOption(option);
    init = echarts.init(document.querySelector('#series'));
    option = {
        title: {
            text: '我的第一幅ECharts',
            subtext: '副标题',
            left: 'center'
        },
        left: 'center',
        tooltip: {
            //item axis none
            trigger: 'item',
            formatter: '{b}:{c}',

            axisPointer: {
                //line shadow cross none
                type: 'line'
            }
        },
        legend: {
            data: ['销量', '进货量'],
            left: 'left'
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        // dataZoom: [{id: 'dataZoomX', type: 'inside', xAxisIndex: [0], filterMode: 'empty'},{id: 'dataZoomY', type:'slider',yAxisIndex: [0], filterMode: 'empty'}],
        dataZoom: [{id: 'dataZoomX', type: 'inside', xAxisIndex: [0], filterMode: 'inside'},{id: 'dataZoomY', type:'slider',yAxisIndex: [0], filterMode: 'empty'}],
        yAxis: {type: 'value'},
        xAxis: {type: 'value'},
        series: {
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件直销'},
                {value: 274, name: '联盟广告'},
                {value: 235, name: '视频广告'},
                {value: 400, name: '搜索引擎'},
            ]
        }
    }
    init.setOption(option);
    init = echarts.init(document.querySelector('#line'));
    option = {
        title: {
            text: '我的第一幅ECharts',
            subtext: '副标题',
            left: 'center'
        },
        left: 'center',
        tooltip: {
            //item axis none
            trigger: 'item',
            formatter: '{b}:{c}',

            axisPointer: {
                //line shadow cross none
                type: 'line'
            }
        },
        legend: {
            data: ['line1', 'line2'],
            left: 'left'
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        // dataZoom: [{id: 'dataZoomX', type: 'inside', xAxisIndex: [0], filterMode: 'empty'},{id: 'dataZoomY', type:'slider',yAxisIndex: [0], filterMode: 'empty'}],
        dataZoom: [{id: 'dataZoomX', type: 'inside', xAxisIndex: [0], filterMode: 'inside'},{id: 'dataZoomY', type:'slider',yAxisIndex: [0], filterMode: 'empty'}],
        yAxis: {type: 'value'},
        xAxis: {type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},
        series: [
            {
                name: 'line1',
                type: 'line',
                data: [450, 134, 132, 563, 234],
                smooth: true,areaStyle: {}
            },{
                name: 'line2',
                type: 'line',
                data: [521, 334, 232, 163, 234],
                smooth: true, areaStyle: {}
            },

        ],
        label: {
            show: true
        }
    }
    init.setOption(option);

</script>
<script>
    /**
     * 漏斗图
     */
    init = echarts.init(document.querySelector('#funnel'));
    option = {
        title: {
            text: '我的第一幅ECharts',
            subtext: '副标题',
            left: 'center'
        },
        left: 'center',
        tooltip: {
            //item axis none
            trigger: 'item',
            formatter: '{b}:{c}',

            axisPointer: {
                //line shadow cross none
                type: 'shadow'
            }
        },
        legend: {
            data: ['登录', '下单', '加购'],
            left: 'left'
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        visualMap: {
            min: 300,
            max: 500,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            bottom: '5%'
        },
        // dataZoom: [{id: 'dataZoomX', type: 'inside', xAxisIndex: [0], filterMode: 'empty'},{id: 'dataZoomY', type:'slider',yAxisIndex: [0], filterMode: 'empty'}],
        // yAxis: {type: 'value'},
        // xAxis: {type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},
        series: [
            {
                name: '漏斗图',
                type: 'funnel',
                left: '10%',
                top: 60,
                bottom: 60,
                width: '80%',
                min: 0,
                max: 500,
                minSize: '0%',
                maxSize: '100%',
                gap: 2,
                label: {
                    show: true,
                    // position: 'inside'
                },
                itemStyle: {
                    borderColor: '#FFF',
                    borderWidth: 10
                },
                //鼠标停留回调
                emphasis: {
                    label: {
                        fontSize: 25
                    }
                },
                data: [
                    {value: 450, name: '登录'},
                    {value: 134, name: '下单'},
                    {value: 132, name: '加购'},
                ]
            }

        ]
    }
    init.setOption(option);
</script>
<script>
    init = echarts.init(document.querySelector('#gauge'));
    option = {
        tooltip: {
            formatter: '{a}<br/>{b}: {c}%'
        },
        toolbox: {
            feature: {
                restore: {},
                saveAsImage: {}
            }
        },
        series: {
            name: '',
            type: 'gauge',
            detail: {formatter: '{value}%'},
            data: [{value: 75, name: '完成率'}]
        }
    }
    init.setOption(option)
</script>
</body>
</html>